<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
    <meta charset="utf-8">
    <title>插值操作</title>
    <style media="screen">
        [v-cloak] {
            display: none;
        }

        .active {
            color: red
        }
    </style>
</head>

<body>
    <div id="app" v-cloak="v-cloak">
        <h2>{{message}}, 阳光</h2>

        <!-- v-once 标记的标签只渲染一次 (message 变更不会触发改标签变更) -->
        <h2 v-once>{{message}}, 阳光</h2>
        <!-- mustache语法中， 不仅仅可以直接写变量，也可以写简单的表达式 -->
        <h3>{{firstName + ' ' + lastName}}</h3>
        <h3>{{firstName}}
            {{lastName}}
        </h3>
        <h4>{{counter * 2}}</h4>

        <!-- 解析指定字符串为html标签 -->
        <p v-html="url"></p>

        <!-- v-text 直接展示文本字符串， 不够灵活，无法进行表达式计算 -->
        <p v-text="message"></p>

        <!-- v-pre 不参与Vue编译 -->
        <p v-pre>{{message}}</p>

        <!-- v-cloak 没有被渲染时不显示该标签 渲染时显示该标签 -->
        <p v-cloak>{{message}}</p>

        <!-- v-bind 进行属性的数据绑定 v-bind 简写 : -->
        <img v-bind:src="imageUrl" alt="" v-once />
        <img :src="imageUrl" alt="" />

        <!-- 通过对象判断 class 是否渲染， 其中 key 为 class 名字, value 为 true/false -->
        <!-- class 和 :class 会进行合并 -->
        <h2 :class="{active: isActive, line: isLine}">{{message}}, 阳光</h2>
        <button type="button" name="button" @click='changeColor'>改变颜色</button>
    </div>
</body>
<script src="../js/vue.js" charset="utf-8"></script>
<script type="text/javascript">
    function sleep(numberMillis) {
        let now = new Date();
        const exitTime = now.getTime() + numberMillis;
        while (now.getTime() < exitTime) {
            now = new Date();
        }
    }

    sleep(1000);
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊',
            firstName: 'kobe',
            lastName: 'gates',
            counter: 100,
            url: '<a href="http://www.baidu.com">百度一下</a>',
            imageUrl: 'https://www.baidu.com/img/flexible/logo/pc/result@2.png',
            isActive: true,
            isLine: false
        },
        methods: {
            changeColor: function() {
                this.isActive = !this.isActive
            }
        }
    });
</script>

</html>
